<template>
  <div class="content">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="flex bg-red">
          <i class="el-icon-user" />
          <div>
            <div>管理员用户</div>
            <div>{{ IndexInfo.admin_num }}名</div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="flex bg-green">
          <i class="el-icon-s-check" />
          <div>
            <div>平台注册用户</div>
            <div>{{ total }}名</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex bg-yellow">
          <i class="el-icon-user" />
          <div>
            <div>平台文章总数</div>
            <div>{{ IndexInfo.article_num }}篇</div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="flex bg-blue">
          <i class="el-icon-tickets" />
          <div>
            <div>广告位{{ IndexInfo.advpos_num }}个</div>
            <div>广告图{{ IndexInfo.advimg_num }}张</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最新注册新用户</span>
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="newUser"
            :show-header="headerShow"
            :highlight-current-row="true"
            :cell-style="rowStyle"
          >
            <el-table-column prop="username" />
            <el-table-column prop="sex" />
          </el-table> </el-card></el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>点赞文章排行</span>
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="hotArticle"
            :show-header="headerShow"
            :highlight-current-row="true"
            :cell-style="rowStyle"
          >
            <el-table-column prop="title" />
          </el-table> </el-card></el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户性别分析</span>
          </div>
          <!-- echarts饼图 -->
          <div ref="boxRef" class="box" /> </el-card></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div ref="barRef" class="barBox" />
      </el-col>
    </el-row>

    <!-- <my-table
      :table-ele="tableEle"
      :table-data="hotArticle"
      @edit="handlerEdit"
      @del="handlerDel"
      @update="handlerUpdate"
    /> -->
  </div>
</template>

<script>
import { getIndexInfo } from '@/api/home'
import * as echarts from 'echarts'
import { pie, bar } from '@/utils/echartSetting'
export default {
  name: 'DashboardPage',
  data() {
    return {
      headerShow: false,
      newUser: [],
      hotArticle: [],
      pieData: [],
      barTitle: [],
      barData: [],
      IndexInfo: [],
      total: 0,
      tableEle: [{
        prop: 'author',
        label: '作者',
        type: true
      },
      {
        prop: 'id',
        label: 'ID',
        type: false
      },
      {
        prop: 'keywords',
        label: '关键字',
        type: true

      }]

    }
  },
  created() {
    this.getInfo()
  },
  mounted() {
    // 初始化饼图
    this.echarts = echarts.init(this.$refs.boxRef)
    this.echarts.setOption(pie)
    // 初始化柱形图
    this.barChart = echarts.init(this.$refs.barRef)
    this.barChart.setOption(bar)
  },
  methods: {
    // 给表格改为虚线
    rowStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'border-bottom:1px dotted #EBEEFA'
      } else {
        return 'border-bottom:1px dotted #EBEEFA'
      }
    },
    // 获取主页统计信息
    async getInfo() {
      const res = await getIndexInfo()
      this.newUser = res.new_user.map((item) => {
        item.sex === 1 ? (item.sex = '女') : (item.sex = '男')
        return item
      })

      this.IndexInfo = res
      this.total = res.user.total
      this.hotArticle = res.hot_article
      this.echarts.setOption({
        series: {
          data: [
            { value: res.user.user_man, name: '男性' },
            { value: res.user.user_woman, name: '女性' }
          ]
        }
      })
      this.barChart.setOption({
        series: {
          data: res.all_cate.map((item) => item.num)
        },
        xAxis: {
          data: res.all_cate.map((item) => item.catename)
        }
      })
    },
    // ================封装表格==========
    handlerDel(id) {
      alert('删除id为' + id)
      console.log(id)
    },
    handlerEdit(id) {
      alert('编辑id为' + id)
      console.log(id)
    },
    handlerUpdate(id) {
      console.log(id)
    }
  }
}
</script>

<style lang="less" scoped>
::deep .el-container {
  background-color: #eaedf1;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-red {
  background: #fb6d49;
}
.bg-green {
  background: #67c23a;
}
.bg-blue {
  background: #3a7ce7;
}
.bg-yellow {
  background: #e6a23c;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.infoBox {
  height: 90px;
  padding-top: 15px;
  border-radius: 5px;
  color: #fff;
  position: relative;
  transition: all 0.3s linear;
  top: 0;
  overflow: hidden;
  font-size: 24px;
  line-height: 90px;
  text-align: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  padding: 0;
}
.el-card ::v-deep .el-card__header {
  padding: 12px 28px;
  background-color: #dddddd;
  font-size: 18px;
}

.el-card ::v-deep .el-card__body {
  padding: 0;
  height: 286px;
}
.el-card::v-deep .el-table__row {
  padding: 0 20px;
}
.box {
  width: 100%;
  height: 100%;
}

.barBox {
  width: 100%;
  height: 400px;
  background-color: #fff;
}

.flex {
  display: flex;
  align-items: center;

  height: 90px;
  color: #fff;
  i {
    font-size: 40px;
    margin: 0 20px;
  }
}
</style>
